<script setup>
import {ref, reactive, computed, watch, onMounted, onUpdated, toRefs, nextTick} from 'vue';
import formApi from './form-api';
import to from 'await-to-js';
import _ from 'lodash';
import {useCommonStore} from "@jzl/stores";
import {api} from "@jzl/api";

const props = defineProps(['currentData']);
const emit = defineEmits([]);

// 数据
const state = reactive({
  loading: false,
  selectedData: null,
  actionType: 'view',     // createOption | createOptionBefore | createOptionChild | edit
  datasTableHeight: 500,
  apis: [],
  formApiWinName: '',
  formApiWinShow: false,
  flowWinShow: false,
  flowWinName: '',
  apiData: null,
  appId: null,
  type: 4,
  form: null,
  formFuncWinName: '',
  formFuncWinShow: false,
});
const {
  loading,
  selectedData,
  actionType,
  datasTableHeight,
  apis,
  formApiWinName,
  formApiWinShow,
  flowWinShow,
  flowWinName,
  apiData,
  appId,
  type,
  form,
  formFuncWinName,
  formFuncWinShow
} = toRefs(state)
const datasContainerRef = ref(null)

// 计算属性
const loginUser = computed(() => useCommonStore().loginUser);
const project = computed(() => useCommonStore().project);
const isModuleApi = computed(() => currentData.value?.svc_module_type === 2);
const isModuleForm = computed(() => currentData.value?.svc_module_type === 1);
const moduleRemark = computed(() => {
  const projectCode = _.get(project.value, "project_domain");
  const moduleCode = _.get(currentData.value, 'svc_module_code');
  const appCode = _.get(currentData.value, "app.group_code");

  const thisPrjFilePath = `/${ projectCode }/${ appCode }/service/${ moduleCode }.js`;
  const corePrjFilePath = `/core/${ appCode }/service/${ moduleCode }.js`;

  return `数据模块调用查找顺序：在线低码【优先级高】 <i class="el-icon-right"></i>
            ${ thisPrjFilePath }【优先级中】 <i class="el-icon-right"></i>${ corePrjFilePath }【优先级低】`;
});
const moduleApiRemark = computed(() => {
  const projectCode = _.get(project.value, "project_domain");
  const moduleCode = _.get(currentData.value, 'svc_module_code');
  const appCode = _.get(currentData.value, "app.group_code");

  const apiUrl = `/api/core/mapi/${ appCode }/${ moduleCode }/[ 接口编码 ]`;

  return `当前接口模块调用方式：${ apiUrl }`;
});
const moduleFilePath = computed(() => {
  const moduleCode = _.get(currentData.value, 'svc_module_code');
  const appCode = _.get(currentData.value, "app.group_code");
  let apiFilePath = "";

  if (isModuleApi.value) {
    apiFilePath = `本地低码文件：/${ appCode }/api/${ moduleCode }.js`;
  } else {
    apiFilePath = `本地低码文件：/${ appCode }/service/${ moduleCode }.js`;
  }
  return apiFilePath;
});
const svcModuleViewName = computed(() => {
  const moduleName = _.get(currentData.value, "svc_module_name");
  const funcName = _.get(currentData.value, "func.func_name");
  let viewName = `【${ moduleName }】微服务个性化`;

  if (funcName) {
    viewName += `- ${ funcName }`;
  }

  return viewName;
});
const isSSuperAdmin = computed(() => _.get(loginUser.value, 'type') === '_SUPER');

// 方法
const init = async () => {
  await loadPlatApis();
  await loadApis();
  handleResize();
};

const handleResize = () => {
  nextTick(() => {
    if (!datasContainerRef.value) return;

    const rect = datasContainerRef.value.getBoundingClientRect();
    const height = _.get(rect, 'height');
    if (height > 0) {
      state.datasTableHeight = height;
    }
  });
};

const loadPlatApis = async () => {
  const apis = await api.services.getPlatApis();
  state.platApis = apis;
};

const loadApis = async () => {
  state.apis = [];

  if (!props.currentData) return;

  if (props.currentData.datas) {
    state.apis = props.currentData.datas;
    return;
  }

  state.loading = true;

  let module = null;
  if (props.currentData.svc_module_id) {
    module = await api.services.getModuleById(props.currentData.svc_module_id);

    if (!module || module.svc_module_id !== props.currentData.svc_module_id) return;
    _.assign(props.currentData, module);
  }

  state.loading = false;

  const eapis = _.get(module, 'apis', []);
  state.apis = eapis;

  mixApis();
};

const mixApis = () => {
  const moduleCode = _.get(props.currentData, 'svc_module_code');
  const appCode = _.get(props.currentData, "app.group_code");
  const prefix = `${ appCode }/${ moduleCode }`;
  const allApis = _.cloneDeep(state.apis) || [];

  _.each(state.platApis, cApi => {
    const url = `${ _.get(cApi, 'api_funame') }/${ _.get(cApi, 'api_code') }`;
    const existApi = _.find(allApis, aApi => _.get(aApi, 'apiUrl') === url);

    if (existApi) {
      existApi.hasCore = true;
      existApi.coreApi = cApi;
    } else if (_.startsWith(url, prefix)) {
      allApis.push({
        hasCore: true,
        use_mode: 4,
        api_name: _.get(cApi, "api_name"),
        apiUrl: url,
        api_code: _.get(cApi, "api_code"),
        coreApi: cApi
      });
    }
  });

  allApis.sort((a, b) => a.hasCore - b.hasCore);

  state.allApis = allApis;
};

const handleClearCache = async () => {
  const moduleCode = _.get(props.currentData, 'svc_module_code');
  const appCode = _.get(props.currentData, "app.group_code");

  const ret = await api.services.clearCache(appCode, moduleCode);

  if (ret) {
    $jui.toast('操作成功！');
  }
};

const handleShowCreateOption = () => {
  const name = _.get(props.currentData, 'svc_module_name');

  state.selectedData = null;
  state.actionType = 'createOption';
  state.formApiWinName = `【${ name }】下新增API`;
  state.formApiWinShow = true;
};

const handleShowCreateOptionChild = (option) => {
  const name = _.get(option, 'name');

  state.selectedData = option;
  state.actionType = 'createOptionChild';
  state.formApiWinName = `【${ name }】选项下新增子选项`;
  state.formApiWinShow = true;
};

const handleShowCreateOptionBefore = (option) => {
  const name = _.get(option, 'name');

  state.selectedData = option;
  state.actionType = 'createOptionBefore';
  state.formApiWinName = `【${ name }】选项前新增选项`;
  state.formApiWinShow = true;
};

const handleFormClose = async (isUpdate) => {
  state.formApiWinShow = false;

  if (isUpdate) {
    props.currentData.datas = null;
    await init();
  }
};

const handleOptionEdit = (option) => {
  const name = _.get(option, 'api_name');

  state.selectedData = option;
  state.actionType = 'edit';
  state.formApiWinName = `【${ name }】接口修改`;
  state.formApiWinShow = true;
};

const handleOptionRemove = (option) => {
  const dt = option;

  if (!dt) return;

  const msg = `确定删除【${dt.api_name}】?`;
  $jui.confirm(msg).then(async () => {
    state.loading = true;

    const ret = await api.services.apiRemove(dt.api_id);

    if (ret) {
      await init();
    }

    state.loading = false;
  }).catch(e => {

  });
};

const handleFlowWinShow = (data) => {
  state.apiData = data;

  if (!data.api_id && data.api_type !== 1) {
    $jui.confirm('数据模块请先新增接口再编辑低码, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      handleOptionEdit(data);
    }).catch(() => {

    });

    return;
  }
  state.flowWinShow = true;
};

const handleFlowWinClose = async () => {
  state.flowWinShow = false;
  await init();
};

const handleApiTest = async (api) => {
  let err, ret;
  const moduleCode = _.get(props.currentData, 'svc_module_code');
  const appCode = _.get(props.currentData, "app.group_code");
  const apiCode = _.get(api, 'api_code');
  let url = null;

  url = `/api/core/mapi/${ appCode }/${ moduleCode }/${ apiCode }`;

  if (!url) return;

  [err, ret] = await to(props.$axios.post(url));

  if (err) {
    $jui.notify({
      message: `调用失败：${_.get(err, 'message')}！`
    });
  } else {
    $jui.notify({
      message: JSON.stringify(_.get(ret, 'data'))
    });
  }
};

const handleCopyUrl = (data) => {
  const moduleCode = _.get(props.currentData, 'svc_module_code');
  const appCode = _.get(props.currentData, "app.group_code");
  const apiCode = _.get(data, 'api_code');
  const apiUrl = _.get(data, 'apiUrl');

  if (apiUrl) {
    $utils.copyText(`/api/core/mapi/${ apiUrl }`);
  }
};

const handleShowCreateOrEdit = () => {
  const func = _.get(props.currentData, "func");

  state.form = func ? _.cloneDeep(func) : null;
  state.formFuncWinShow = true;
};

const handleShowDelete = async () => {
  const id = _.get(props.currentData, 'svc_module_id');
  const name = _.get(props.currentData, 'svc_module_name');
  const msg = `确定删除微模块【${ name }】的个性化实现？`;

  $jui.confirm(msg, '删除确认').then(async () => {
    const ret = await api.services.moduleFuncRemove(id);
    if (!ret) return;
    await init();
  }).catch(e => {

  });
};

const handleSave = async () => {
  const form = _.cloneDeep(state.form);
  let tip = '';

  if (!form) return;

  state.loading = true;

  const funcId = _.get(form, 'func_id');
  const id = _.get(props.currentData, "svc_module_id");
  let ret;

  if (funcId) {
    ret = await api.services.moduleFuncUpdate(id, form);
  } else {
    ret = await api.services.moduleFuncCreate(id, form);
  }

  if (ret) {
    state.formFuncWinShow = false;
    await init();
  }

  state.loading = false;
};

const handleChgModuleStore = async () => {
  const id = _.get(props.currentData, 'svc_module_id');
  let svc_module_store = _.get(props.currentData, 'svc_module_store');

  if (svc_module_store === 1) {
    svc_module_store = 2;
  } else {
    svc_module_store = 1;
  }

  const ret = await api.services.moduleUpdate(id, {
    svc_module_store
  });

  if (ret) {
    await init();
  }
};

const handleSyncToOther = async (api) => {
  const apiId = _.get(api, "api_id");
  const ret = await api.services.apiSyncToOther(apiId);

  if (ret) {
    props.$jui.toast("同步成功！");
  }
};

const handleChangeUseMode = async (use_mode, data) => {
  const api_id = _.get(data, "api_id");
  const core_api_id = _.get(data, "coreApi.api_id");
  const module_id = _.get(props.currentData, 'svc_module_id');

  const ret = await api.services.apiUseModeChange({
    use_mode,
    api_id,
    core_api_id,
    module_id
  });

  if (ret) await init();
};

// 监听器
watch(() => props.currentData.svc_module_id, () => {
  handleResize();
  loadApis();
});

// 生命周期钩子
onMounted(() => {
  init();
});
</script>


<template>
  <div class="mb-info" v-if="currentData" v-loading="loading">
    <div class="mb-detail" v-if="currentData.svc_module_name">
      <div class="mb-detail-hd-icon">
        <i v-if="isModuleApi" class="fa fa-telegram-plane"></i>
        <i v-else class="fa fa-medium-m"></i>
      </div>
      <div class="mb-detail-hd-info" style="flex: 0;">
        <div class="mb-detail-hd-title" v-html="currentData.svc_module_name"></div>
        <div class="mb-detail-hd-mark"
             v-copy="currentData.svc_module_code"
             v-tippy="{ arrow: true, placement: 'right' }" content="点击复制">{{ currentData.svc_module_code }}</div>

        <!--<div class="app-portal-tools">
            <i class="app-portal-action fa fa-cog" v-tippy="{ arrow: true }" content="表单编辑"
               @click="handleFormShowEdit"></i>
        </div>-->
      </div>
      <div class="api-file-path">{{ moduleFilePath }}</div>
      <el-button icon="el-icon-refresh" class="app-group-add-btn" type="text" size="small"
                 @click="handleClearCache()">刷新缓存</el-button>
      <el-button icon="el-icon-plus" class="app-group-add-btn" type="text" size="small"
                 v-if="isModuleApi"
                 @click="handleShowCreateOption()">注册接口</el-button>
    </div>
    <el-alert v-if="isModuleApi"
              type="warning" show-icon :closable="false" style="border-radius: 0px;border-bottom: 1px solid #e6eaf0;"
              title="微接口仅支持POST请求。">
      <div v-html="moduleApiRemark"></div>
    </el-alert>
    <el-alert v-else-if="currentData && currentData.svc_module_id"
              type="warning" show-icon :closable="false" style="border-radius: 0px;border-bottom: 1px solid #e6eaf0;"
              title="数据服务的个性化实现类，在类里覆盖实现需要重写的方法。">
      <div v-html="moduleRemark"></div></el-alert>
    <div v-if="isModuleApi" class="m-table-container" ref="datasContainer">
      <el-table :data="allApis" size="mini" row-key="mb_id" :tree-props="{ children: 'subs' }"
                :height="datasTableHeight" class="m-table" indent="0" default-expand-all>
        <el-table-column prop="api_type" label="类型" width="50" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.hasCore" class="fa fa-cloud" style="color: #F56C6C;"
               v-tippy="{ arrow: true }" content="有核心平台接口"></i>
            <i v-else class="fa fa-copyright" style="color: #96E1ff;"
               v-tippy="{ arrow: true }" content="定制接口"></i>
          </template>
        </el-table-column>
        <el-table-column prop="api_name" label="接口名称" width="280">
          <template slot-scope="scope">
            <div v-tippy="{ arrow: true, placement: 'top-start' }" :content="scope.row.remark || scope.row.api_name">{{scope.row.api_name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="api_uuid" label="接口URL">
          <template slot-scope="scope">
            <div class="text-copy-wrap" :class="{ 'empty': !scope.row.apiUrl }"
                 v-copy="scope.row.apiUrl" v-tippy="{ arrow: true, placement: 'right' }" content="点击复制">
              {{scope.row.apiUrl || '-'}}
            </div>
          </template>
        </el-table-column>
        <!--<el-table-column prop="api_code" label="接口编码（方法名）" width="240">
            <template slot-scope="scope">
                <div class="text-copy-wrap" :class="{ 'empty': !scope.row.api_code }"
                     v-copy="scope.row.api_code" v-tippy="{ arrow: true, placement: 'right' }" content="点击复制">
                    {{scope.row.api_code || '-'}}
                </div>
            </template>
        </el-table-column>-->
        <!--<el-table-column prop="api_store" label="低码切换" width="80" align="center">
            <template slot-scope="scope">

            </template>
        </el-table-column>-->
        <!--<el-table-column v-if="isModuleForm(currentData)" prop="api_rest" label="接口内部路由" width="200"></el-table-column>-->

        <el-table-column prop="api_funame" label="低码使用状态" width="240" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.use_mode" size="mini" @change="handleChangeUseMode($event, scope.row)">
              <el-radio-button :label="1" v-tippy="{ arrow: true }" content="优先使用本地，再查找核心平台">默认</el-radio-button>
              <el-radio-button :label="2" v-tippy="{ arrow: true }" content="仅本地">本地</el-radio-button>
              <el-radio-button :label="3" :disabled="!scope.row.hasCore" v-tippy="{ arrow: true }" content="仅核心平台">平台</el-radio-button>
              <el-radio-button :label="4" v-tippy="{ arrow: true }" content="禁用 404">禁用</el-radio-button>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column prop="api_flow_id" label="本地低码" width="80px" align="center">
          <template slot-scope="scope" v-if="scope.row.api_id">
            <!--<template v-if="isModuleForm(currentData)" prop="remark" label="说明">{{scope.row.remark}}</template>-->
            <div class="low-type-tag">
              <!--  v-if="scope.row.api_store === 1" -->
              <i class="fa fa-file-code" :class="{ 'disabled': scope.row.api_store !== 1 }"
                 v-tippy="{ arrow: true }" content="文件低码"></i>
              <i class="fa fa-internet-explorer" :class="{ 'disabled': scope.row.api_store !== 2 }"
                 v-tippy="{ arrow: true }" content="在线低码" @click="handleFlowWinShow(scope.row)"></i>
              <!--<el-button v-if="scope.row.api_flow_id && scope.row.api_flow_id > 0"
                         icon="el-icon-edit" size="mini" type="text" v-tippy="{ arrow: true }" content="修改"
                         @click="handleFlowWinShow(scope.row)">在线低码</el-button>
              <el-button v-else icon="el-icon-plus" size="mini" type="text" v-tippy="{ arrow: true }" content="新增"
                         @click="handleFlowWinShow(scope.row)">在线低码</el-button>-->
            </div>
            <!--<div style="display:flex;width:100%;">
                <div style="min-width: 160px;">
                    <el-tag size="mini">{{scope.row.api_code}}</el-tag>
                </div>
                <div style="color: #CCC;"><i class="el-icon-right"></i></div>
                <div style="padding-left: 10px;">
                    <el-tag size="mini">{{scope.row.api_rest}}</el-tag>
                </div>
            </div>-->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template slot-scope="scope" v-if="scope.row.api_id">
            <!--<el-button icon="el-icon-top" size="mini" type="text" v-tippy="{ arrow: true }" content="向上"
                       @click="handleOptionUp(scope.row)"></el-button>
            <el-button icon="el-icon-bottom" size="mini" type="text" v-tippy="{ arrow: true }" content="向下"
                       @click="handleOptionDown(scope.row)"></el-button>-->
            <template>
              <el-button icon="el-icon-edit" size="mini" type="text" v-tippy="{ arrow: true }" content="修改"
                         @click="handleOptionEdit(scope.row)"></el-button>
              <el-button v-if="scope.api_id" icon="el-icon-delete" size="mini" type="text" v-tippy="{ arrow: true }" content="删除"
                         @click="handleOptionRemove(scope.row)"></el-button>
            </template>
            <el-button size="mini" type="text" v-tippy="{ arrow: true }" content="复制调用链接"
                       @click="handleCopyUrl(scope.row)">复制URL</el-button>
            <el-button v-if="isModuleApi" type="text" size="mini" @click="handleApiTest(scope.row)">测试</el-button>
            <!--<el-button v-if="isSSuperAdmin" type="text" size="mini" @click="handleSyncToOther(scope.row)">接口定义复制到所有项目</el-button>-->
            <!--<el-button icon="el-icon-circle-plus-outline" size="mini" type="text" v-tippy="{ arrow: true }" content="添加子选项"
                       v-if="currentData && currentData.type === 'TREE'"
                       @click="handleShowCreateOptionChild(scope.row)"></el-button>-->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else-if="currentData && currentData.svc_module_id"
         class="comps"
         style="flex: 1;display: flex;align-items: center;justify-content: center;"><!-- 已废弃 -->
      <!--<div class="comp comp-plain" @click="handleShowCreate()" style="cursor: pointer;">
          <div class="comp-body" style="font-size: 16px;">
              <el-button class="comp-action" icon="el-icon-plus" type="text">新模板</el-button>
          </div>
      </div>-->
      <div class="comp-box comp-plain low-svc-module">
        <!--<div class="comp-head">
            <span class="comp-head-title">111</span>
            <el-button size="mini" type="text" @click="handleShowCustomEditWin(comp)">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(comp)">删除</el-button>
        </div>-->
        <!--<div class="comp-body low-svc-module">-->
        <div class="low-type-bicon" :class="{ 'low-bicon-file': currentData.svc_module_store === 1, 'low-bicon-online': currentData.svc_module_store !== 1  }">
          <i v-if="currentData.svc_module_store === 1" class="fa fa-file-code"
             v-tippy="{ arrow: true }" content="生效-文件低码"></i>
          <i v-else class="fa fa-internet-explorer"
             v-tippy="{ arrow: true }" content="生效-在线低码"></i>

          <i class="low-type-switch fa fa-exchange-alt" v-tippy="{ arrow: true }" content="切换在线低码/文件低码"
             @click="handleChgModuleStore"></i>
        </div>

        <div class="low-actions">
          <template v-if="currentData && currentData.func_id > 0">{{ svcModuleViewName }}</template>
          <!--<el-button v-else class="comp-action" icon="el-icon-plus" type="text">数据服务个性化</el-button>-->

          <div class="low-type-tag" @click="handleShowCreateOrEdit"
               :class="{ 'low-type-file': currentData.svc_module_store === 1, 'low-type-online': currentData.svc_module_store !== 1 }">

            <el-button v-if="currentData.func_id && currentData.func_id > 0"
                       icon="el-icon-edit" size="mini" type="text" v-tippy="{ arrow: true }" content="修改"
            >在线低码，{{ currentData.svc_module_store === 1 ? '当前不生效': '当前生效' }}</el-button>
            <el-button v-else icon="el-icon-plus" size="mini" type="text" v-tippy="{ arrow: true }" content="新增"
            >在线低码，{{ currentData.svc_module_store === 1 ? '当前不生效': '当前生效' }}</el-button>
          </div>
        </div>
        <!--</div>-->
        <!--<div class="actions" v-if="currentData && currentData.func">
            <el-button size="small" type="text">查看</el-button>
            <el-button size="small" type="text">编辑</el-button>
            <el-button size="small" type="text" @click="handleShowDelete(func)">删除</el-button>
        </div>-->
      </div>
    </div>
    <!--<div v-else class="mb-group-info">
        <div class="mb-group-title" v-html="currentData.name"></div>
        <div>{{currentData.remark}}</div>
    </div>-->

    <el-dialog
      :title="formApiWinName"
      v-model="formApiWinShow"
      :close-on-click-modal="false"
      :append-to-body="true">
      <form-api v-if="formApiWinShow" :current-data="selectedData" :module="currentData" :action-type="actionType" @close="handleFormClose"></form-api>
    </el-dialog>

    <div class="service-marks">
      <!--<el-table :data="apiMarks" style="width: 100%" size="mini" border>
          <el-table-column prop="name" label="接口名" width="160"></el-table-column>
          <el-table-column prop="remark" label="说明"></el-table-column>
      </el-table>-->
    </div>

    <el-dialog
      :title="flowWinName"
      v-model="flowWinShow"
      :fullscreen="true"
      custom-class="m-dialog-fullscreen"
      :close-on-click-modal="false"
      :append-to-body="true">
      <flow-create v-if="flowWinShow" :show.sync="flowWinShow"
                   :flow-id="apiData && apiData.api_flow_id" :flow-type="2"
                   :api-id="apiData && apiData.api_id"
                   :flow-default="{ flow_name: apiData.api_name + '接口低码' }"
                   @close="handleFlowWinClose"></flow-create>
    </el-dialog>

    <el-drawer
      :title="formFuncWinName"
      v-model="formFuncWinShow"
      :append-to-body="true"
      :with-header="false"
      size="96%"
      direction="rtl"
      class="wf-node-prop-drawer">
      <div class="func-form-body">
        <lownode-func v-model="form" :app-id="appId" :type="type" code-type="serverModule" :has-input="false" :has-output="false">
          <div class="func-form-actions" slot="header-tools">
            <el-button @click="formFuncWinShow = false" size="small" style="width:80px;"> 取消 </el-button>
            <el-button type="primary" @click="handleSave()" size="small" style="width:80px;"> 保存 </el-button>
          </div>
        </lownode-func>
      </div>
    </el-drawer>

    <resize-observer @notify="handleResize" />
  </div>
</template>

<style lang="scss" scoped>
.mb-info {
  display: flex;
  flex-flow: column;
  overflow: auto;
  height: 100%;
  border-left: 1px solid #F1F1F1;
  /*padding: 10px;*/

  .m-table-container {
    flex: 1;
    height: 100%;
    overflow: auto;
    /*margin: 10px;*/
    margin-bottom: 0px;
  }
}
.mb-group-info {
  height: 100%;
  display:flex;
  flex:1;
  justify-content:center;
  align-items:center;
  flex-flow: column;

  .mb-group-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.mb-detail {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6eaf0;
  width: 100%;
  height: 40px;
  padding-right: 10px;
  background: #FFF;

  .mb-detail-hd-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 26px;
    height: 26px;
    line-height: 1;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow .2s;
    margin: 7px 5px 7px 7px;
    color: #FFF;
    background: #4ea3fb;

    i {
      color: #FFF;
    }
  }
  .mb-detail-hd-info {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .mb-detail-hd-title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
  }
  .mb-detail-hd-mark {
    font-size: 13px;
    color: #999;
    margin-left: 6px;
    padding-left: 6px;
    position: relative;

    &:before {
      content: ' ';
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: #CCC;
    }
  }
}
.text-copy-wrap {
  position: relative;

  &.empty {
    color: #CCC;
  }

  .el-button {
    display: none;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: #FFF;
    padding-left: 5px;
    padding-right: 5px;
  }

  &:hover {
    .el-button {
      display: block;
    }
  }
}
.api-file-path {
  flex: 1;
  font-weight: bold;
  text-align: center;
}
.low-type-tag {
  /*border: 1px solid #409EFF;
  border-radius: 20px;
  padding: 0px 10px;*/

  > i {
    line-height:24px;
    /*margin-right:5px;*/
    font-size: 13px;
    padding: 5px;
    cursor: pointer;
    color:#409EFF;

    &.disabled {
      color: #ccc;
      opacity: .5;
    }
  }

  &.low-type-online {
    i {
      color:#409EFF;
    }
  }

  &.low-type-file {
    border-color: #67c23a;
    i {
      color:#67c23a
    }

    .el-button {
      color: #CCC;
    }
  }
}

.low-svc-module {
  display: flex;
  flex-flow: row;
  width: 360px;
  height: 120px;
  margin-bottom: 100px;

  .low-type-bicon {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background: red;
    text-align: center;
    position: relative;

    i {
      font-size: 50px;
      color: #FFF;
    }

    .low-type-switch {
      position: absolute;
      right: 0px;
      bottom: 0px;
      background: #666;
      color: #EEE;
      width: 24px;
      height: 24px;
      font-size: 13px;
      line-height: 24px;
      display: none;
      cursor: pointer;

      &:hover {
        color: #FFF;
        background: #000;
      }
    }
  }

  &:hover {
    .low-type-switch {
      display: block;
    }
  }

  .low-bicon-online {
    background: #409EFF;
  }

  .low-bicon-file {
    background: #67c23a;
  }

  .low-actions {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
  }
}

</style>
